<template>
  <div class="menu-top">
    <div class="menu-top-main">
      <div class="left">
        <span
          v-if="!menu.isCollapse"
          @click="changeState()"
          class="el-icon-s-fold"
        ></span>
        <span v-else @click="changeState()" class="el-icon-s-unfold"></span>

        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            v-for="ele in routerList"
            :key="ele"
            :to="'/' + ele"
            >{{ ele | routerName }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <div class="right">
        <div><el-button @click="singOut" size="mini">退出登陆</el-button></div>

        <img
          src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      routerList: ["/"],
    };
  },
  computed: {
    ...mapState(["menu"]),
  },
  watch: {
    "$route.path": {
      handler(newValue) {
        this.routerList = newValue.split("/").filter((ele) => ele !== "");
        this.routerList.unshift("");
        // console.log(this.routerList);
      },
      immediate: true,
    },
  },
  filters: {
    routerName: function (value) {
      let name = "";
      if (value === "") {
        name = "首页";
      } else if (value === "users") {
        name = "用户列表";
      } else if (value === "role-list") {
        name = "角色列表";
      } else if (value === "jurisdiction") {
        name = "权限列表";
      } else if (value === "things-lists") {
        name = "商品列表";
      } else if (value === "class-paramater") {
        name = "分类参数";
      } else if (value === "thing-class") {
        name = "商品分类";
      } else if (value === "order-lists") {
        name = "订单列表";
      } else if (value === "report-form") {
        name = "数据报表";
      } else if (value === "addThings") {
        name = "添加商品";
      }
      return name;
    },
  },
  methods: {
    ...mapMutations(["changeState"]),
    singOut() {
      sessionStorage.removeItem("token");
      this.$router.push("/login");
    },
  },
};
</script>

<style  lang='less'>
.menu-top {
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  .menu-top-main {
    padding: 5px 15px 5px 15px;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      span {
        font-size: 24px;
        line-height: 40px;
        cursor: pointer;
      }

      .el-breadcrumb {
        margin-left: 15px;
        span {
          font-size: 14px !important;
        }
      }
    }

    .signout {
      font-size: 16px;
      // line-height: 20px;
    }
    .right {
      display: flex;
      line-height: 40px;
      img {
        margin-left: 15px;
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }
    }
  }
}
</style>